<template>
  <t-modal
    :title="title"
    :width="500"
    :visible="visible"
    :confirmLoading="loading"
    @ok="
      () => {
        $emit('ok');
      }
    "
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-form-item :wrapperCol="{ span: 24 }">
          <h2 style="text-align: center;">客户大事件</h2>
        </a-form-item>
        <a-form-item
          label="密级"
          :labelCol="{ span: 16 }"
          :wrapperCol="{ span: 8 }"
        >
          <a-select
            placeholder="请选择密级"
            @select="handleSelect"
            v-decorator="[
              'selectSecrecyField',
              { rules: [{ required: true, message: '请选择密级！' }] },
            ]"
          >
            <a-select-option
              :value="item.secrecyCode"
              v-for="item in secrecyList"
              :key="item.uuid"
            >
              {{ item.secrecyName }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item
          label="事件名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="请输入事件名称"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入事件名称！' }] },
            ]"
          />
        </a-form-item>
        <a-form-item
          label="事件详情"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea
            placeholder="请输入事件详情"
            v-decorator="[
              'sex',
              { rules: [{ required: true, message: '请输入事件详情！' }] },
            ]"
          />
        </a-form-item>
        <a-form-item
          label="事件备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-textarea
            placeholder="请输入事件备注"
            v-decorator="['testCombobox']"
          />
        </a-form-item>
        <a-form-item
          label="上传附件"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-upload
            action="http://192.168.1.234:20004/document/minio/uploadfile"
            :multiple="true"
            :file-list="fileList"
            :headers="headers"
            :data="optionsData"
            @change="handleChange"
            v-decorator="['testDate']"
          >
            <a-button> <a-icon type="upload" />点击上传</a-button>
            <div class="select-box" @click.stop>
              <a-select
                style="width: 120px;margin-left: 10px;margin-bottom: 5px;"
                size="small"
                v-for="(item, index) in fileList"
                :key="index"
                @click.stop
                placeholder="请选择密级"
                allowClear
                v-model="item.secrecyCode"
                @select="
                  (value, option) => handleInteriorSelect(value, option, item)
                "
              >
                <a-select-option
                  :value="obj.secrecyCode"
                  v-for="(obj, index) in interiorSecurityList"
                  :key="obj.uuid"
                >
                  {{ obj.secrecyName }}
                </a-select-option>
              </a-select>
            </div>
          </a-upload>
        </a-form-item>
        <a-form-item class="hiddenItem">
          <a-input v-decorator="['uuid']" type="hidden" />
        </a-form-item>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
import pick from "lodash.pick";
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
// 表单字段
const fields = [
  "selectSecrecyField",
  "name",
  "sex",
  "testCombobox",
  "testDate",
  "uuid",
];
export default {
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model: {
      type: Object,
      default: () => null,
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$post("/system/sysSecrecy/getLoginUserConfidentiality").then(
          (res) => {
            if (res.statusCode === 200) this.secrecyList = res.data;
          }
        );
        const token = Vue.ls.get(ACCESS_TOKEN);
        this.headers.token = token;
      }
    },
  },
  data() {
    return {
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 4,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 20,
        },
      },
      form: this.$form.createForm(this),
      headers: {},
      secrecyList: [],
      interiorSecurityList: [],
      title: "",
      fileList: [],
    };
  },
  methods: {
    handleSelect(value) {
      this.$post("/system/sysSecrecy/getLoginUserConfidentiality", {
        secrecyCode: value,
      }).then((res) => {
        if (res.statusCode === 200) {
          this.interiorSecurityList = res.data;
        }
      });
    },
    handleInteriorSelect(value, option, item) {
      item["secrecyCode"] = value;
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-2);
      fileList = fileList.map((file) => {
        return {
          url: file.url,
          status: file.status,
          name: file.name,
          uid: file.uid,
          secrecyCode: file.secrecyCode ? file.secrecyCode : "",
        };
      });
      this.fileList = fileList;
      info.fileList = fileList;
    },
    optionsData() {
      let str3 = {};
      str3.bucket = "yx-cloud-vue";
      return str3;
    },
    add(m) {
      this.fileList = [];
      this.$nextTick(() => {
        this.form.setFieldsValue({
          puuid: m.puuid,
          code: m.code,
        });
      });
    },
    edit(m) {
      if (m.ruleStatus === "true") {
        m.ruleStatus = true;
      } else {
        m.ruleStatus = false;
      }
      this.form.setFieldsValue(pick(m, fields));
      this.fileList = JSON.parse(m.testDate);
    },
  },
  created() {
    // 防止表单未注册
    fields.forEach((v) => this.form.getFieldDecorator(v));
    const token = Vue.ls.get(ACCESS_TOKEN);
    this.headers.token = token;
  },
};
</script>
<style scoped lang="less">
.select-box {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 37px;
  right: 0;
}
/deep/.ant-upload-list {
  width: 68% !important;
}
</style>
